<?php
use app\assets\OrderformAsset;
use yii\helpers\Html;
OrderformAsset::register($this);
?>

<!-- CSS goes in the document HEAD or added to your external stylesheet -->
<style type="text/css">
    table.gridtable {
        font-family: verdana,arial,sans-serif;
        font-size:15px;
        color:#333333;
        border-width: 1px;
        border-color: #666666;
        border-collapse: collapse;
    }
    table.gridtable th {
        text-align: center;
        border-width: 1px;
        padding: 8px;
        border-style: solid;
        border-color: rgba(102, 102, 102, 0.35);;
        background-color: rgba(51, 122, 183, 0.25);
    }
    table.gridtable td {
        border-width: 1px;
        padding: 8px;
        border-style: solid;
        border-color: rgba(102, 102, 102, 0.35);;
        background-color: #ffffff;
    }
</style>





<div id="tabs">
    <ul>
        <li><a href="javascript:void(0);"  onclick="tableData(1)">待发货</a></li>
        <li><a href="javascript:void(0);"  onclick="tableData(0)">待付款</a></li>
        <li><a href="javascript:void(0);"  onclick="tableData(4)">已发货</a></li>
        <li><a href="javascript:void(0);"  onclick="tableData(7)">已完成</a></li>
        <li><a href="javascript:void(0);"  onclick="tableData(-2)">售后处理</a></li>
        <li><a href="javascript:void(0);"  onclick="tableData(8)">已关闭</a></li>
    </ul>
    <p style="display: none" id="obj-p">1</p>
</div>

<div class="col-md-12" style="margin-top: -30px;margin-left: -10px;">

    <div id="toolbar">
        <button id="multiDispatchBtn" class="btn btn-primary" disabled>
            批量发货
        </button>
        <a id="" class="btn btn-primary" href="export">
            批量导出订单
        </a>
    </div>

    <table id="table">
    </table>

</div>

<!-- 查看物流Modal 提示框-->
<div class="modal fade" id="checkExpressModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" >查看物流信息</h4>
            </div>
            <div id="addForm">
                <div class="modal-body">
                    <div class="form-group">
                        <label for="check_express_company_input" class="control-label">物流公司:</label>
                        <input type="text" class="form-control" id="check_express_company_input" name="check_express_company_input" readonly >
                    </div>
                    <div class="form-group">
                        <label for="check_express_num_input" class="control-label">物流单号:</label>
                        <input type="text" class="form-control" id="check_express_num_input" name="check_express_num_input" readonly >
                    </div>
                    <div class="form-group">
                        <label for="check_express_num_input" class="control-label">物流详情:</label>
                        <!-- Table goes in the document BODY -->
                        <table class="gridtable" >
                            <tr>
                                <th>时 间</th><th>地点和跟踪进度</th>
                            </tr>
                            <tr>
                                <td>2016-08-13 19:20:49</td><td>重庆石桥铺公司 的收件员 唐梨*** 已收件重庆石桥铺公司 的收件员 唐梨*** 已收件</td>
                            </tr>
                            <tr>
                                <td>2016-08-13 22:54:37</td><td>快件已到达 重庆航空部</td>
                            </tr>
                        </table>
                    </div>

                    <p id="orderform_id_p" hidden></p>



                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>
</div>


<!-- 发货Modal 提示框-->
<div class="modal fade" id="dispatchModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" >填写物流信息</h4>
            </div>
            <div id="checkForm">
                <div class="modal-body">
                    <div class="form-group">
                        <label for="expressCompanySelect" class="control-label">物流公司:</label>
                        <select name="" id="expressCompanySelect" class="form-control" >
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="express_num_input" class="control-label">物流单号:</label>
                        <input type="text" class="form-control" id="express_num_input" name="express_num_input" check-type="required" >
                    </div>
                    <span id="orderform_id_sapn" hidden></span>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="submit" class="btn btn-primary"  id="addBtn">确定发货</button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 批量发货Modal 提示框-->
<div class="modal fade" id="multiDispatchModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" >填写物流信息(批量发货仅支持同一家快递公司操作)</h4>
            </div>
            <div id="multiAddForm">
                <div class="modal-body multiAddFormBody">
                    <div class="form-group">
                        <label for="multiExpressCompanySelect" class="control-label">物流公司:</label>
                        <select name="" id="multiExpressCompanySelect" class="form-control" >
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="submit" class="btn btn-primary"  id="multiAddBtn">确定发货</button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 订单详情 模态框-->
<div class="modal fade " id="detailsModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" >订单详情</h4>
            </div>
            <div id="detailsForm">
                <div class="modal-body">
                    <div class=" form-group">
                        <label for="" class="control-label">订单包含商品:</label>
                        <table id="commodityTable">
                        </table>
                    </div>

                    <div class="form-group">
                        <div class="row">
                            <div class="col-md-6 col-sm-6">
                                <label for="details_express_company_input" class="control-label">物流公司:</label>
                                <input type="text" class="form-control" id="details_express_company_input" name="details_express_company_input" readonly >
                            </div>
                            <div class="col-md-6 col-sm-6">
                                <label for="details_express_num_input" class="control-label">物流单号:</label>
                                <input type="text" class="form-control" id="details_express_num_input" name="details_express_num_input" readonly >
                            </div>
                            <br>
                            <div class="col-md-12 col-sm-12">
                                <label for="details_express_num_input" class="control-label">买家留言:</label>
                                <input type="text" class="form-control" id="details_remarks_input" name="details_remarks_input" readonly >
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="submit" class="btn btn-primary"  id="multiAddBtn">确定发货</button>
                </div>
            </div>
        </div>
    </div>
</div>



<!-- 确定退款Modal 提示框-->
<div class="modal fade" id="refundModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" >是否已经完成退款</h4>
            </div>
            <div id="multiAddForm">
                <div class="modal-body">
                    <p style="color: red">确定后将无法变更状态</p>
                    <input type="text" value="" id="refund_orderform_id" style="display: none">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary"  id="refundBtn">确定</button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 确定退货Modal 提示框-->
<div class="modal fade" id="returnModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" >是否已经完成退货操作</h4>
            </div>
            <div id="multiAddForm">
                <div class="modal-body">
                    <p style="color: red">确定后将无法变更状态</p>
                    <input type="text" value="" id="return_orderform_id" style="display: none">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary"  id="returnBtn">确定</button>
                </div>
            </div>
        </div>
    </div>
</div>


<!-- 关闭订单 提示框-->
<div class="modal fade" id="closeModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" >是否确定关闭订单操作</h4>
            </div>
            <div id="multiAddForm">
                <div class="modal-body">
                    <p style="color: red">确定后将立即关闭订单，该交易结束</p>
                    <input type="text" value="" id="close_orderform_id" style="display: none">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary"  id="closeBtn">确定</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script>

    //加载一级二级目录
    $.ajax({
        url:"express-company",
        dataType: "json",
        success: function (data) {
            $.each(data,function(){
                console.log(this);
                $('#expressCompanySelect').append('<option value='+this[0]+'>'+this[1]+'</option>');
                $('#multiExpressCompanySelect').append('<option value='+this[0]+'>'+this[1]+'</option>');
            });
        }
    });

    //点击tab加载表单数据
    function tableData(obj){
        console.log(obj);
        $('#obj-p').html(obj);
        if(obj==1){
            $('#multiDispatchBtn').show();
        }else{
            $('#multiDispatchBtn').hide();
        }
        $url = 'orderform-table-data?status='+obj;
        $('#table').bootstrapTable('removeAll');//先清空缓存
//        $('#table').bootstrapTable({url:$url});
        $('#table').bootstrapTable('refreshOptions',{url:$url});
//        $('#table').bootstrapTable('refresh');



    }

    //初始化tab栏
    $('#tabs').tabs();

    //初始化时间选择器
    $(".form_datetime").datetimepicker({
        format: "dd MM yyyy - hh:ii"
    });

    //初始化表格设置
    $('#commodityTable').bootstrapTable({
//        height: 200,//高度
        singleSelect: false,//复选框只能选择一条记录
        striped: true,      //是否显示行间隔色
        cache: false,            //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
        pagination: false,     //是否显示分页（*）
        sortable: false,           //是否启用排序
        sortOrder: "desc",          //排序方式
        method: 'get',      //请求方式（*）
        pageNumber:1,      //初始化加载第一页，默认第一页
        pageSize: 100,      //每页的记录行数（*）
        pageList: [10, 20, 50, 100],  //可供选择的每页的行数（*）
        uniqueId:'orderform_commodity_id',

        columns: [{
            field: '',
            align: 'center',
            title: '主图',
            width:'15%',
            valign: 'middle',
            formatter:function(value,row,index){
                var a = '<img src="'+row.commodity_pic_url+'"'+'alt="" style="width: 100px;height: 80px" class="img-rounded">';
                return a;}
        },{
            field: 'commodity_name',
            align: 'center',
            width:'35%',
            valign: 'middle',
            title: '商品名称'
        }, {
            field: 'attr_opt_name',
            align: 'center',
            valign: 'middle',
            width:'15%',
            title: '已选规格'

        }, {
            field: 'price',
            align: 'center',
            width:'8%',
            valign: 'middle',
            title: '单价'
        },{
            field: 'commodity_num',
            align: 'center',
            valign: 'middle',
            width:'5%',
            title: '数量'
        },{
            field: 'money_total',
            align: 'center',
            valign: 'middle',
            width:'8%',
            title: '实收款(元)'
        }]
    });

    //初始化表格设置
    $('#table').bootstrapTable({
        height: 800,//高度
        toolbar: '#toolbar',        //工具按钮用哪个容器
        singleSelect: false,//复选框只能选择一条记录
        search: true,//是否显示右上角的搜索框
        striped: true,      //是否显示行间隔色
        cache: false,            //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
        pagination: true,     //是否显示分页（*）
        sortable: false,           //是否启用排序
        sortOrder: "desc",          //排序方式
        sidePagination: "server", //服务端处理分页
        method: 'get',      //请求方式（*）
        pageNumber:1,      //初始化加载第一页，默认第一页
        pageSize: 10,      //每页的记录行数（*）
        pageList: [10, 20, 50, 100],  //可供选择的每页的行数（*）
        cardView: false,          //是否显示详细视图
        uniqueId:'orderform_id',
        url:"orderform-table-data?status="+$('#obj-p').html(),

        columns: [{
            field: 'state',
            checkbox: true,
            align: 'center',
            width:'3%',
            valign: 'middle',
            halign:'center'
        },{
            field: 'orderform_id',
            align: 'center',
            width:'10%',
            valign: 'middle',
            title: '订单号',
            formatter:function(value,row,index){
                var a = '<p style="margin: 0 0 0px">'+row.orderform_id+'</p>'
                return a;
            }
        }, {
            field: '',
            align: 'center',
            valign: 'middle',
            width:'40%',
            title: '订单信息',
            formatter:function(value,row,index){
                var a = '<div class="col-md-12" >'+
                    '<div align="center" class="col-md-4" >'+
                    '<img src="'+row.commodity_pic_url +'"'+ 'alt="" style="width: 100%;vertical-align:middle;" class="img-rounded pic_img">'+
                    '</div>'+
                    '<div class="col-md-8">'+
                    '<p style="text-align:left;">' +row.commodity_name+'</p>'+
                    '<p style="text-align:left;">' +'等'+row.commodity_count+' 类商品'+'</p>'+
                    '</div>'+
                '</div>';
//                setTimeout("$('.pic_img').css({'height':'100px'});",500);
                return a;
            }
        },{
            field: 'user_name',
            align: 'center',
            valign: 'middle',
            width:'8%',
            title: '买家账号',
            formatter:function(value,row,index){
                var a = '<p style="color: #f60;margin: 0 0 0px">'+row.user_name+'</p>';
                return a;
            }
        },{
            field: 'stockInfo',
            align: 'center',
            valign: 'middle',
            width:'20%',
            title: '收货信息',
            formatter:function(value,row,index){
                var a = '<p>'+row.addressbook['fullname']+' '+row.addressbook['mobile']+'</p>';
                var b = '<p>'+row.addressbook['province']+' '+row.addressbook['city']+' '+row.addressbook['district']+' '+row.addressbook['address']+'</p>';
                return a+b;
            }
        },{
            field: 'status',
            align: 'center',
            valign: 'middle',
            width:'8%',
            title: '交易状态',
            formatter:function(value,row,index){
                if(row.status==0){
                    var a = '<p >'+'待付款'+'</p>';
                    var b = '<button class="btn btn-primary" onclick="onCloseClick(\''+ row.orderform_id + '\')">'+'关闭订单'+'</button>';
                    return a+b;
                }else if(row.status==1){
                    var a = '<p >'+'已付款'+'</p>';
                    var b = '<button class="btn btn-primary" onclick="onDispatchClick(\''+ row.orderform_id + '\')">'+'发货'+'</button>';
                    return a+b;
                }else if(row.status==2){
                    var a = '<p >'+'退款中'+'</p>';
                    var b = '<button class="btn btn-primary" onclick="onRefundClick(\''+ row.orderform_id + '\')">'+'确定退款'+'</button>';
                    return a+b;
                }else if(row.status==3){
                    var a = '<p >'+'已退款'+'</p>';
                    return a;
                }else if(row.status==4){
                    var a = '<p >'+'已发货'+'</p>';
                    var b = '<button class="btn btn-primary" onclick="onCheckExpressClick(\''+ row.orderform_id + '\')">'+'查看物流'+'</button>';
                    return a+b;
                }else if(row.status==5){
                    var a = '<p >'+'退货中'+'</p>';
                    var b = '<button class="btn btn-primary" onclick="onReturnClick(\''+ row.orderform_id + '\')">'+'确定退货'+'</button>';
                    return a+b;
                }else if(row.status==6){
                    var a = '<p >'+'已退货'+'</p>';
                    return a;
                }else if(row.status==7){
                    var a = '<p >'+'已完成'+'</p>';
                    return a;
                }else if(row.status==8){
                    var a = '<p >'+'已关闭'+'</p>';
                    return a;
                }
            }
        },{
            field: 'money',
            align: 'center',
            valign: 'middle',
            width:'8%',
            title: '实收款(元)',
            formatter:function(value,row,index){
                var a = '<p style="color: #f60;">'+'¥ '+ (parseFloat(row.money) + parseFloat(row.postage)).toFixed(2) +'</p>';
                var b = '<span>'+'(含快递:' + row.postage + ')'+'</span>';
                return a+b;
            }
        }, {
            field: 'create_time',
            align: 'center',
            valign: 'middle',
            width:'10%',
            title: '创建时间'
        },{
            field: 'operate',
            align: 'center',
            valign: 'middle',
            width:'8%',
            title: '操作',
            formatter:function(value,row,index){
                var a = '<a href="#" mce_href="#" onclick="onEditClick(\''+ row.orderform_id + '\')">订单详情</a> ';
                return a;}
        }]
    });

    $(window).resize(function () {
        $('#table').bootstrapTable('resetView');
    });


    //点击查看详情
    function onEditClick(orderform_id){

        $url = 'commodity-table-data?orderform_id='+orderform_id;
        $('#commodityTable').bootstrapTable('refresh',{url:$url});

        //物流操作
        $.ajax({
            url: "check-express",
            data:{"orderform_id":orderform_id},
            dataType: "json",
            success: function (data) {
                console.log(data);
                $('#details_express_company_input').val(data['express_company']);
                $('#details_express_num_input').val(data['express_num']);
                $('#details_remarks_input').val(data['remarks']);
                $('#detailsModal').modal();
            }
        });


    }

    //正则的样式
    $(function() {
        //1. 正则逻辑样式
        $("#addForm").validation({icon: true, reqmark: false});
        $("#multiAddForm").validation({icon: true, reqmark: false});
    });

    //点击关闭订单按钮显示模态框
    function onCloseClick(orderform_id){
        $('#closeModal').modal();
        $('#close_orderform_id').val(orderform_id);
    }

    //点击单个发货按钮显示模态框
    function onDispatchClick(orderform_id){
        $('#express_num_input').val('');
        $('#dispatchModal').modal();
        console.log(orderform_id);
        $('#orderform_id_sapn').html(orderform_id);
    }

    //点击退款按钮显示模态框
    function onRefundClick(orderform_id){
        $('#refundModal').modal();
        console.log(orderform_id);
        $('#refund_orderform_id').val(orderform_id);
    }

    //点击退换按钮显示模态框
    function onReturnClick(orderform_id){
        $('#returnModal').modal();
        console.log(orderform_id);
        $('#return_orderform_id').val(orderform_id);
    }

    //点击查看物流按钮显示模态框
    function onCheckExpressClick(orderform_id){
        //物流操作
        $.ajax({
            url: "check-express",
            data:{"orderform_id":orderform_id},
            dataType: "json",
            success: function (data) {
//                $('#check_express_company_input').val(data['express_company']);
//                $('#check_express_num_input').val(data['express_num']);
//                $('#checkExpressModal').modal();
                $set='height='+screen.height*0.8+','+'width='+screen.width*0.8+','+'top='+screen.height*0.1+','+'left='+screen.width*0.1+','+'toolbar=no, menubar=no, scrollbars=no, resizable=no,location=n o, status=no';
                $url="http://www.kuaidi100.com/chaxun?com="+data['express_company']+"&nu="+data['express_num'];
                window.open($url,'newwindow', $set);
            }
        });
    }

    //单个发货按钮显示
    $('#addBtn').click(function () {

        //正则提示写法
        if ($("#addForm").valid()==false){
            alert('填写信息有误,请检查');
            return false;
        }

        var express_company = $("#expressCompanySelect option:selected").val();
        var express_num = $('#express_num_input').val();
        var orderform_id = $('#orderform_id_sapn').html();

        //发货操作
        $.ajax({
            url: "dispatch",
            data:{"orderform_id":orderform_id,"express_company":express_company,"express_num":express_num},
            dataType: "json",
            success: function (data) {
                $('#table').bootstrapTable('removeByUniqueId',orderform_id);
                $('#dispatchModal').modal('hide');
                $('#express_num_input').val('');
                alert('发货成功');
            }
        });

    });

    //单个退款按钮显示
    $('#refundBtn').click(function () {

        //发货操作
        $.ajax({
            url: "refund",
            data:{"orderform_id":$('#refund_orderform_id').val()},
            dataType: "json",
            success: function (data) {
                $('#table').bootstrapTable('refresh');
                $('#refundModal').modal('hide');
                alert('退款操作完成');
            }
        });

    });

    //单个退货按钮显示
    $('#returnBtn').click(function () {

        //发货操作
        $.ajax({
            url: "return",
            data:{"orderform_id":$('#return_orderform_id').val()},
            dataType: "json",
            success: function (data) {
                $('#table').bootstrapTable('refresh');
                $('#returnModal').modal('hide');
                alert('退货操作完成');
            }
        });

    });

    //关闭订单确定按钮事件
    $('#closeBtn').click(function () {

        //发货操作
        $.ajax({
            url: "close",
            data:{"orderform_id":$('#close_orderform_id').val()},
            dataType: "json",
            success: function (data) {
                $('#table').bootstrapTable('refresh');
                $('#closeModal').modal('hide');
                alert('该订单已关闭');
            }
        });

    });

    //复选框点击事件
    $('#table').on('check.bs.table uncheck.bs.table ' +
        'check-all.bs.table uncheck-all.bs.table', function () {
        $('#multiDispatchBtn').prop('disabled', !$('#table').bootstrapTable('getSelections').length);
        selections = getIdSelections();

    });

    //获取选择的合集
    function getIdSelections() {
        return $.map($('#table').bootstrapTable('getSelections'), function (row) {
            return row.orderform_id;
        });
    }

    //批量发货模态框显示
    $('#multiDispatchBtn').click(function () {
        var ids = getIdSelections();
        console.log('ids:'+ids);

        $('.multiAddFormBody').find('.orderform-number').remove();
        //遍历获取
        $.each(ids,function(){
            $('.multiAddFormBody').append('<div class="form-group orderform-number"><label class="control-label">订单号:'+this+'</label> <input type="text" class="form-control multi-input" check-type="required" placeholder="输入对应的物流单号" id='+'input_'+this+''+'> </div>');
        });
        $('#multiDispatchModal').modal();
    });

    //批量发货按钮显示
    $('#multiAddBtn').click(function () {

        var express_company = $("#multiExpressCompanySelect option:selected").val();

        $(".multi-input").each(function(){
            var orderform_id = $(this).attr('id').substr(6);
            var express_num =$(this).val();
            //发货操作
            $.ajax({
                url: "dispatch",
                data:{"orderform_id":orderform_id,"express_company":express_company,"express_num":express_num},
                dataType: "json",
                success: function (data) {
                    $('#table').bootstrapTable('removeByUniqueId',orderform_id);
                }
            });
        });
        $('#multiDispatchModal').modal('hide');
        alert('发货成功');
    });


//    $("body").on('','.pic_img',function(){
//        var $divWidth = $('.pic_img').width();
//        $('.pic_img').css({'height':$divWidth});
//    });







</script>





